<template>
  <div class="searchj-box">
    <div class="row">
      <div class="left">
        <el-icon>
          <Search />
        </el-icon>
        <span>筛选搜索</span>
      </div>
      <div class="right">
        <el-button @click="">重置</el-button>
        <el-button type="primary" @click="queryUserList">查询搜索</el-button>
      </div>
    </div>
    <el-form>
      <div class="Search-criteria">
        <el-form-item label="品牌名称" style="padding-right: 30px">
          <el-input placeholder="品牌名称" style="width: 200px" />
        </el-form-item>
        <el-form-item label="推荐状态">
          <el-select class="m-2" placeholder="全部">
            <el-option value="0" label="未推荐"></el-option>
            <el-option value="1" label="推荐中"></el-option>
          </el-select>
        </el-form-item>
      </div>
    </el-form>
  </div>
  <div class="add-area">
    <div class="text">
      <el-icon><Tickets /></el-icon><span>数据列表</span>
    </div>
    <el-button type="primary">选择品牌</el-button>
  </div>
  <el-table
    ref="multipleTableRef"
    :data="list"
    style="width: 100%"
    @selection-change=""
    border
    cell-class-name="align-c"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column label="编号" prop="id" align="center" />
    <el-table-column label="品牌名称" prop="subjectName" />
    <el-table-column label="是否推荐" prop="loginTime">
      <template #default="{ row }">
        <el-switch
          v-model="row.recommendStatus"
          :active-value="1"
          :inactive-value="0"
          @change="switchStatue(row)"
        />
      </template>
    </el-table-column>

    <el-table-column label="排序" prop="sort" align="center" />
    <el-table-column label="状态" prop="recommendStatus" align="center">
      <template #default="{ row }">
        <div>
          {{ row.recommendStatus === 1 ? "推荐中" : "未推荐" }}
        </div>
      </template>
    </el-table-column>

    <el-table-column label="操作" width="200px">
      <template #default="{ row }">
        <el-button
          text
          type="primary"
          size="small"
          @click="open({ id: row.id, sort: row.sort })"
          >设置排序</el-button
        >
        <el-button text type="primary" size="small" @click="del(row.id)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <!-- 设置排序 -->
  <el-dialog v-model="dialogFormVisible" title="设置排序">
    <el-form :model="from">
      <el-form-item label="排序：" :label-width="formLabelWidth">
        <el-input v-model="from.sort" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="Confirm({ id: from.id, sort: from.sort })"
        >
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>

  <div class="page">
    <div class="left">
      <el-select class="m-2" placeholder="批量操作">
        <el-option value="0" label="取消推荐"></el-option>
        <el-option value="1" label="设为推荐"></el-option>
        <el-option value="2" label="删除"></el-option>
      </el-select>
      <span class="pad-left">
        <el-button type="primary">确定</el-button>
      </span>
    </div>
    <ElConfigProvider :locale="zhCn">
      <div class="">
        <el-pagination
          v-model:current-page="queryParams.pageNum"
          v-model:page-size="queryParams.pageSize"
          :page-sizes="[5, 10, 20, 50]"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="queryUserList"
          @current-change="queryUserList"
        />
      </div>
    </ElConfigProvider>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import {
  getRecommendSubjectList,
  SwitchRecommendStatus,
  homeSubjectUpdateSortApi,
  homeSubjectDeleteApi,
} from "./api";
import { Search, Tickets } from "@element-plus/icons-vue";
import { ElConfigProvider, ElMessage, ElMessageBox } from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";

let dialogFormVisible = ref(false);
// 设置排序的表单数据
let from = reactive<UpdateSortModel>({
  id: 0,
  sort: 0,
});

const formLabelWidth = "140px";
// 点击设置排序
const open = (fromN: UpdateSortModel) => {
  from.id = fromN.id;
  from.sort = fromN.sort;
  dialogFormVisible.value = true;
};
// 设置排序里点确定
const Confirm = (fromN: UpdateSortModel) => {
  dialogFormVisible.value = false;
  ElMessageBox.confirm("是否要修改排序？", "提示", {
    type: "warning",
    cancelButtonText: "取消",
  })
    .then(() => {
      homeSubjectUpdateSortApi(fromN).then((res) => {
        if (res.code === 200) {
          // 刷新页面数据
          queryUserList();
          ElMessage.success(res.message);
        } else {
          ElMessage.error(res.message);
        }
      });
    })
    .catch((err) => {
      console.log(err);
    });
};
const switchStatue = (row: any) => {
  ElMessageBox.confirm("是否要修改该状态??", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      SwitchRecommendStatus(row.id!, row.recommendStatus)
        .then((res) => {
          if (res.code === 200) {
            ElMessage.success("修改成功");
          } else {
            row.recommendStatus = row.recommendStatus === 1 ? 0 : 1;
          }
        })
        .catch(() => {
          row.recommendStatus = row.recommendStatus === 1 ? 0 : 1;
        });
    })
    .catch(() => {
      ElMessage("取消操作");
      row.recommendStatus = row.recommendStatus === 1 ? 0 : 1;
    });
};

const showDialog = ref(false);
const closeDialog = (isReload?: boolean) => {
  showDialog.value = false;
  if (isReload) queryUserList();
};

const queryParams = reactive<NewProductParams>({
  pageNum: 1,
  pageSize: 5,
  total: 0,
});

const list = ref<NewProductParams>();
const total = ref(0);

const queryUserList = () => {
  getRecommendSubjectList(queryParams).then((res) => {
    if (res.code === 200) {
      list.value = res.data.list;

      total.value = res.data.total;
    }
  });
};
queryUserList();

// 删除
const del = (id: number) => {
  ElMessageBox.confirm("是否要删除数据？", "提示", {
    type: "warning",
    cancelButtonText: "取消",
  })
    .then(() => {
      // 删除数据
      homeSubjectDeleteApi([id]).then((res) => {
        if (res.code === 200) {
          ElMessage.success(res.message);
          queryUserList();
        }
      });
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>
<style lang="less" scoped>
.searchj-box {
  box-shadow: 0 0 4px #ccc;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  .Search-criteria {
    display: flex;
  }

  .row {
    padding: 20px 0;
    display: flex;

    &:first-child {
      justify-content: space-between;
    }

    &:last-child {
      width: 400px;

      span {
        width: 100px;
      }
    }
  }
}

.page {
  padding: 30px;
  display: flex;
  justify-content: space-between;
  .pad-left {
    margin-left: 15px;
  }
}

:deep(.align-c) {
  .cell {
    text-align: center !important;
  }
}
.add-area {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 0 4px #ccc;
  border-radius: 10px;
  .text {
    display: flex;
    align-items: center;
    span {
      padding-left: 10px;
    }
  }
}
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
